import * as d3 from "d3";
import { Path } from "d3-path";
import { grad2rad } from "./functions";
import { Scale } from "./scale";

interface IAxis{
    name: string
    min: number
    max: number
    type: string
    radius?: number
    textRotateDegrees?: number
    scale: any
}

interface IScale {
    d3_scale: any
}

export const defaultInitAxisSettings: IAxis = {
    name: "шкала",
    min: 0,
    max: 100,
    type: "linear",
    radius: 300,
    textRotateDegrees: 0,
    scale: new Scale(),
}

export class Axis {
    name = "string";
    svg = d3.create("svg:g");
    rotate = 0;


    constructor(public settings: IAxis = defaultInitAxisSettings) {
        this.appendRadialAxis();
    }

    private appendRadialAxis(){
        let n = 0;
        for (let i = this.settings.scale.settings.min; i <= this.settings.scale.settings.max; i+=10){
            n += 1;
            let point1 = this.calcRadiusPoints(grad2rad(this.settings.scale.calc(i)), this.settings.radius-15);
            let point2 = this.calcRadiusPoints(grad2rad(this.settings.scale.calc(i)), this.settings.radius);
            let point3 = this.calcRadiusPoints(grad2rad(this.settings.scale.calc(i)), this.settings.radius-40);
            this.svg.append("line")
                .attr("stroke", "black")
                .attr("x1", point1.x)
                .attr("y1", point1.y)
                .attr("x2", point2.x)
                .attr("y2", point2.y);
            this.svg.append("text")
                .attr("x", point3.x)
                .attr("y", point3.y)
                .attr('text-anchor', 'middle')
                .attr("class", "myLabel")
                .attr("dx", -2)
                .attr("dy", 6)
                .attr("transform", `rotate(${this.settings.textRotateDegrees}, ${point3.x-2}, ${point3.y+6})`)
                .text(i);
            
        }
        let point = this.calcRadiusPoints(grad2rad(this.settings.scale.calc(210)), this.settings.radius);
        // this.svg.append("line")
        //     .attr("stroke", "black")
        //     .attr("x1", 300)
        //     .attr("y1", 300)
        //     .attr("x2", point.x)
        //     .attr("y2", point.y);
        this.svg.append("circle")
            .attr("cx", this.settings.radius)
            .attr("cy", this.settings.radius)
            .attr("r", this.settings.radius-15)
            .attr("fill", "none")
            .attr("stroke", "blue");
    }

    private appendСaption(mark: number) {
        let angle = grad2rad(this.settings.scale.calc(mark));
        let point = this.calcRadiusPoints(angle, this.settings.radius);
        this.svg.append("text")
            .attr("x", point.x)
            .attr("y", point.y)
            .attr("transform", `rotate(${this.settings.textRotateDegrees})`)
            .text(mark);
    }

    private calcRadiusPoints(angle: number, radius: number) {
        const x = this.settings.radius + Math.sin(angle) * radius;
        const y = this.settings.radius + Math.cos(angle) * radius;
        return {"x": x, "y": y};
    }

    // private getTicks() {}

    // private getMajorTicks(){}

    // // Получаем линию шкалы если не задана в initSettings.svgPath
    // // Поумолчанию делает дугу
    private getSVG() {
        return this.svg
            .attr("transform", `rotate(${this.rotate}, 300, 300) translate(0, 0)`);
    }
}